<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/system/user' }">系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item>
        <el-input size="small" v-model="formInline.roleName" placeholder="输入角色名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input size="small" v-model="formInline.roleDescription" placeholder="输入角色描述"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
        <el-button size="small" icon="el-icon-refresh" @click="reload">重置</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table :data="listData" border style="width: 100%" stripe>
      <el-table-column align="center" label="序号" width="120" type="index"></el-table-column>
      <el-table-column align="center" prop="roleName" label="角色名称" width="300"></el-table-column>
      <el-table-column align="center" prop="roleDescription" label="角色描述" width="300"></el-table-column>
      <el-table-column align="center" prop="createTime" label="创建时间" width="300">
        <template slot-scope="scope">
          {{getFormat(scope.row.createTime)}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button icon="el-icon-setting" type="success" size="mini" @click="handleEdit(scope.row.roleId)">编辑</el-button>
          <el-button icon="el-icon-document-delete" type="danger" size="mini" @click="deleteRole(scope.row.roleId)">删除</el-button>
          <el-button size="mini" icon="el-icon-edit" type="info" @click="handlePermission(scope.row.roleId)">分配权限</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增或者编辑弹窗 -->
    <edit :title="edit.title" :roleId="roleId" :visiable="edit.visiable" :formData="edit.formData" :remoteClose="remoteClose"/>

    <!-- 分配权限弹框   -->
    <permission  :roleId="permission.roleId" :visiable="permission.visiable" :remoteClose="remoteClose" />

  </div>
</template>

<script>
import Edit from './edit';
import roleApi from '@/api/role';
import Pagination from '../../components/Pagination';
import {dateFormat} from '@/utils/date';
import Permission from './permission';
export default {
  data() {
    return {
      edit: {
        title: '',
        visiable: false,
        formData: {},
      },
      permission: {
        visiable: false,
        roleId: null
      },
      formInline: {},
      listData: [], //角色列表数据
      roleId: '',
    }
  },
  components: {
    Pagination, Edit, Permission
  },

  created() {
    this.fetchData();
  },

  methods: {
    // 编辑
    handleEdit(id) {
      console.log("roleId="+id);
      roleApi.getRoleById(id).then(resp => {
        if (resp.code === 200) {
          this.roleId = id;
          this.edit.title = '编辑';
          this.edit.formData = resp.data;
          this.edit.visiable = true;
        }
      })
    },

    // 分配权限
    handlePermission(id) {
      console.log("分配权限..."+id);
      this.permission.roleId = id;
      this.permission.visiable = true;
    },

    handleAdd() {
      this.edit.title = '新增';
      this.edit.visiable = true;
    },

    // 子组件会触发该方法来关闭窗口
    remoteClose() {
      this.edit.formData = {};
      this.edit.title = '';
      this.edit.visiable = false;
      this.permission.visiable = false;
      this.permission.roleId = null;
      this.fetchData();
    },
    // 条件查询
    queryData() {
      this.fetchData();
    },
    // 格式化日期
    getFormat(date){
      return dateFormat(date);
    },
    // 获取角色列表
    fetchData() {
      roleApi.getRoles(this.formInline).then(resp => {
        if (resp.code === 200) {
          console.log("resp"+resp.data)
          this.listData = resp.data.list;
        }
      })
    },
    // 删除角色
    deleteRole(id) {
      //console.log("删除角色id"+id);
      this.$confirm('确认删除这条记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        roleApi.deleteRole(id).then(response => {
          if (response.code === 200) {
            this.$notify({
              title: '成功',
              message: '操作成功',
              type: 'success',
              duration: 1500
            });
          } else if (response.code === 1404){
            this.$notify.error({
              title: '错误',
              message: '该角色已被使用，不能删除!',
              duration: 1500
            });
          } else if (response.code === 306) {
            this.$notify.error({
              title: '错误',
              message: '您没有操作权限，请联系管理员',
              duration: 1500
            });
          } else {
            this.$notify.error({
              title: '错误',
              message: '系统异常!',
              duration: 1500
            });
          }
          this.fetchData();
        });
      }).catch(() => {
        // 取消删除
      });
    },
    // 重置
    reload() {
      this.formInline = {};
      this.fetchData();
    },

  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>


